<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>TestEdge</title>
		<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/jquery.jscrollpane.css" />
		<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/jquery-ui.css" />
		<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/style_testEdge.css" />
		<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/style_testEdge_custom.css" />

		<script type="text/javascript" src="/ce-static-testedge/common/jscripts/jquery-1.8.2.min.js"></script>
		<script type="text/javascript" src="/ce-static-testedge/common/jscripts/jquery-ui.js"></script>
		<script type="text/javascript" src="/ce-static-testedge/common/jscripts/knockout-2.2.1.js"></script>
		<script type="application/javascript" src="/ce-static-testedge/common/jscripts/knockout.validation.js"></script>
		<script type="text/javascript" src="/ce-static-testedge/common/jscripts/common.js"></script>
		<script type="text/javascript" src="/ce-static-testedge/ayp/jscripts/ayp_create_common.js"></script>
		<!--Table Sortable -->
		<script type="text/javascript" src="/ce-static-testedge/common/jscripts/jquery.tablesorter.min.js"></script>
		<!--custome scroll -->
		<script type="text/javascript" src="/ce-static-testedge/common/jscripts/jquery.jscrollpane.min.js"></script>
		<script type="text/javascript" src="/ce-static-testedge/common/jscripts/jquery.mousewheel.js"></script>
		<!-- Loader -->
		<script type="text/javascript" src="/ce-static-testedge/common/jscripts/jquery.loader.js"></script>
		<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/jquery.loader.css"/>
	
		<!--[if IE]>
		<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/style_IE.css" />
		<script type="text/javascript" src="/ce-static-testedge/common/jscripts/jquery.placeholder.min.js"></script>
		<script>
		$(function() {
		$('input, textarea').placeholder();
		});
		</script>
		<![endif]-->
		<!--[if IE 8]>
		<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/style_IE_8.css" />
		<![endif]-->
	</head>

	<body>

		<!--BO Main Content -->
		<div class="contentWrapper">
			<div class="wrapper">
				<div class="testEdgeMainContent">
					<h1 class="titleMain titleMain_marigin_bottom font100"><span class="floatleft" id="aypTitle"></span><a href="#."  onclick="showHelp(event)" style="margin-top: 10px; margin-right: 13px"  class="iconHelp seletc floatright"></a></h1>
					<div class="help"></div>
					<!--BO Added Facilities -->
					<a class="floatright" href="#" style="margin-right: 10px" onclick="retrunToAcademicYear(event)"> &lt; Back to Academic Year</a>
					<div class="container">
						<div id="tabs" >
							<div class="floatright note">
								<br />
								Total working days available : <strong><span id="lblWorkingDays">0 days</span></strong>
								<!--As per CBSE rule, you need to have a minimum of 220 working days-->
							</div>
							<ul>
								<li>
									<a href="#tabs-1" onclick="genaralInfoTabChangeHandler(event)" data-bind="click: genaralInfoTabChangeHandler">General Info<span>Duration &amp; Holidays</span></a>
								</li>
								<li>
									<a href="#tabs-2" onclick="sectionsTabChangeHandler(event)" >Sections<span>Define sections</span></a>
								</li>
								<li>
									<a href="#tabs-3" onclick="eventsTabChangeHandler(event)">Events<span>School Events</span></a>
								</li>
							</ul>
							<div id="tabs-1">
								<div class="scroll-pane2">
									<!--div class="eventWrap genInfo" data-bind="validationOptions: { messageTemplate: 'customMessageTemplate' }"-->
									<div id="ayp_wrap" class="eventWrap genInfo">
										<ul class="studentData">
											<li>
												<label>Name the Academic Year</label>
												<input data-bind="value: title, validationElement: title, disable:editEventHolidayOnly" type="text"  class="textInput" placeholder="Type here.." >
											</li>
											<li>
												<label>Academic Year Duration</label>
												<label class="floatleft datepickerLabel">
													<input type="text" id="academicYearStart" data-bind="value: startDate, disable:editEventHolidayOnly" class="datepicker" dateFormat: "dd/mm/yy" placeholder="Choose..">
												</label>
												<label class="floatleft to">to</label>
												<label class="floatleft datepickerLabel">
													<input type="text" id="academicYearEnd" data-bind="value: endDate, disable:editEventHolidayOnly" class="datepicker" dateFormat: "dd/mm/yy" placeholder="Choose..">
												</label>
												<!--a href="#" class="te-button buttonBlue floatleft" data-bind="click: saveAcademicYearPlan">Save</a>
												<div class="clearBoth"></div-->
											</li>

										</ul>
										<div class="clearBoth"></div>

										<div class="schoolEventsWrapper">
											<div class="floatleft">
												<label>Annual Holidays</label>
											</div>

											<div class="floatright" >
												<!--a href="#." class="te-button buttonFacilities" hidden >Import Holiday List</a-->
												<a href="#" class="floatright" data-bind="click: addHoliday,visible: editMode" style="width: 115px;padding-top: 9px">Add another Holiday</a>
											</div>
										</div>
										<div class="clearBoth"></div>

										<table border="1" class="schoolEventstable create_ayp_fontSize12">
											<thead>
												<tr class="border-bottom">
													<!--th class="header" style="width: 130px;">Start Date</th>
													<th class="header" style="width: 130px;">End Date</th>
													<th class="header" style="width: 353px;">Description</th>
													<th class="header" style="width: 220px;">No. of Days</th>
													<th class="header" style="width: 45px;"></th-->
													<th class="header" style="width: 130px;">Start Date</th>
													<th class="header" style="width: 130px;">End Date</th>
													<th class="header" style="width: 350px;">Description</th>
													<th class="header" >No. of Days</th>
													<th class="header" ></th>
												</tr>
											</thead>
											<tbody data-bind="template: { name: 'holiday-template', foreach: holidays , as: 'holiday'}">

											</tbody>
										</table>
										<a href="#" class="addFloorBtn" id="btn-addHoliday" data-bind="click: addHoliday,visible: editMode" style="width: 115px">Add another Holiday</a>
									</div>

								</div>
								<div class="bottomButton">
									<a href="#" class="te-button buttonBlue floatleft"  data-bind="click: saveAcademicYearPlan,visible: editMode">Save</a>
									<a href="#" class="te-button buttonGray floatleft" data-bind="click: returnBack,visible: editMode">Cancel</a>
									<div class="clearBoth"></div>
								</div>
							</div>
							<!--  template: { name: 'section-template', foreach: sections, as: 'section', accordion: { updateOn: items, options: { active: false, collapsible: true } }} -->
							<!--  -->
							<div id="tabs-2">
								<div class="scroll-pane5">
									<!--a href="#" class="te-button buttonFacilities floatright addSection" data-bind="click: addSectionHandler">Add a Section</a-->
									<a href="#" class="te-button buttonFacilities floatright createSection" data-bind="click: addSectionHandler,visible: editMode && !editEventHolidayOnly()">Create a Section</a>
									<div class="clearBoth"></div>
									<!--div id="accordion" class="academicSectionWrapper"-->
									<p data-bind="visible: sections().length==0">
										No Sections defined. To Add a Section, click on <span style="font-weight: bold"> Create a Section.</span>
									</p>
									<div id="accordion"  data-bind="template:{name: 'section-template', foreach: sections, as: 'section' }, jqAccordion: { updateOn: sections, options: { active: false, collapsible: true, heightStyle: 'content' } }"></div>
								</div>
							</div>
							<div id="tabs-3">
								<div class="scroll-pane5">
									<div class="eventWrap">
										<div class="floatright">
											<a href="#." class="te-button buttonFacilities addEvent create_ayp_addEvent" data-bind="click: invokeAddEventHandler,visible: editMode">Add Event</a>
										</div>
										<div class="clearBoth"></div>
										<p data-bind="visible: events().length==0">
											No School Events defined. To Add a School Event  click on <span style="font-weight: bold"> Add Event.</span>
										</p>
										<table border="1" class="schoolEventstable create_ayp_fontSize12 " data-bind="visible: events().length>0">
											<thead>
												<tr class="border-bottom">
													<th class="header " style="width: 130px;">Date</th>
													<th class="header create_ayp_fontSize12" style="width: 180px;">No. of Days</th>
													<th class="header" style="width: 150px;" >Type</th>
													<th class="header" style="width: 300px;">Event Name</th>
													<!--th class="header" style="width: 126px;"></th-->
													<th class="header" style="width: 20px;"></th>
													<th class="header" style="width: 20px;"></th>
													<br />
												</tr>
											</thead>
											<tbody data-bind="template: { name: 'event-template', foreach: events , as: 'event'}">

											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!--EO Add Facilities -->
				</div>
			</div>
		</div>
		<!--EO Main Content -->

		<!--BO Popup Content Create Section  -->
		<div id="create-Section" title="Create Section">
			<div class="scroll-pane5">
				<div class="sectionContainer">
					<label>Name the Section</label>
					<input type="text" class="textInput" data-bind="value: sectionTitle" placeholder="Type here..">

					<table border="1" class="schoolEventstable">
						<tr class="border-bottom">
							<th class="header" style="width: 125px;">Grade</th>
							<th class="header" style="width: 113px;">No. Of Divisions</th>
							<th class="header" style="width: 126px;">Naming Convention</th>
							<th class="header" style="width: 350px;">Divisions</th>
							<th class="header"></th>
						</tr>
						<!-- ko template: { name: 'grade-template', foreach: grades, as: 'grade'} -->
						<!-- /ko -->
					</table>

					<a href="#" class="addFloorBtn" data-bind="click: addGradeHandler" style="width: 60px">Add Grade</a>
				</div>
			</div>
			<div class="bottomButton">
				<a href="#" class="te-button buttonBlue floatleft" data-bind="click: createSectionHandler" id="saveInfo">Save</a>
				<a href="#" class="te-button buttonGray floatleft" id="cencelBox" data-bind="click: cancelSectionHandler">Cancel</a>
				<div class="clearBoth"></div>
			</div>
		</div>
		<!--EO Popup Content Create Section  -->

		<!--BO Popup Content Add Event  -->
		<div id="add-Event" title="Add Event">
			<div class="sectionContainer">
				<ul class="eventData">
					<li>
						<label>Event Name</label>
						<input type="text" class="textInput" data-bind="value: title" placeholder="Type here.." maxlength="75" />
					</li>
					<li>
						<div class="floatleft spacing">
							<label>Date</label>
							<label class="floatleft datepickerLabel">
								<input type="text" data-bind="value: startDate" id="eventStartDate" class="datepicker_ayp" placeholder="Choose.." />
							</label>
							<label class="floatleft to">to</label>
							<label class="floatleft datepickerLabel">
								<input type="text" data-bind="value: endDate" id="eventEndDate" class="datepicker_ayp" placeholder="Choose.." />
							</label>
						</div>
						<div class="floatleft width123">
							<label>Duration</label>
							<!--div class="ci-dropdown width123">
							<a  href="#." class="ddheading" ><p id="dd" class="text-format-15">All Day</p></a>
							<ul>
							<li><a href="#.">Half Day</a></li>
							<li><a href="#.">All Day</a></li>
							</ul>
							</div-->
							<select class="select floatleft width123" data-bind="options: durationOptions, value: durationVal"></select>
						</div>
						<div class="clearBoth"></div>
					</li>
					<li>

						<div class="width123">
							<label>Category</label>
							<!--div class="ci-dropdown width123" id="ddlCategory"  data-bind="value: category">
							<a  href="#." class="ddheading" ><p id="dd" class="text-format-15">Select</p></a>
							<ul>
							<li><a href="#.">School</a></li>
							<li><a href="#.">Per-Primary</a></li>
							<li><a href="#.">Primary</a></li>
							<li><a href="#.">Secondary</a></li>
							<li><a href="#.">Higher Secondary</a></li>
							</ul>
							</div-->
							<select  class="select floatleft width123" data-bind="options: availableCategories, optionsText: 'sectionTitle',value: category, optionsCaption: 'Select'"></select>
						</div>

						<div class="clearBoth"></div>
					</li>
					<li>
						<label>Description</label>
						<textarea data-bind="value: desc" maxlength="250"></textarea>
					</li>
					<!--li>
					<label>Additional Details <i>(optional)</i></label>
					<textarea class="textareaHeight"></textarea>
					</li-->

				</ul>
			</div>
			<div class="bottomButton">
				<a href="#" class="te-button buttonBlue floatleft" data-bind="click: addEvent" id="saveInfo1">Save</a>
				<a href="#" class="te-button buttonGray floatleft" data-bind="click: cancelEvent" id="cencelBox1">Cancel</a>
				<div class="clearBoth"></div>
			</div>
		</div>

		<div id="dialog-confirm1" title="Delete">
			<div class="sectionContainer">
				<p data-bind="text: confirmationText">

				</p>
			</div>
			<div class="bottomButton">
				<a href="#" class="te-button buttonBlue floatleft" data-bind="click: deleteItem" id="delete" >Delete</a>
				<a href="#" class="te-button buttonGray floatleft" data-bind="click: cancelItem" id="cencel">Cancel</a>
				<div class="clearBoth"></div>
			</div>
		</div>
		<div id="dialog-alert" title="Alert">
			<div class="sectionContainer">
				<p id="errorText">To proceed, save the current tab: <b>General Info.</b></p>
			</div>
			<div class="bottomButton">
				<a href="#" class="te-button buttonBlue floatleft closeAlert" >Ok</a>
				<div class="clearBoth"></div>
			</div>
		</div>
		
		<!--div id="dialog-confirm-save" title="Confirmation">
			<div class="sectionContainer">
				<p >Changes made are saved successfully.</p>
			</div>
			<div class="bottomButton">
				<a href="#" class="te-button buttonBlue floatleft closeAlert" >Ok</a>
				<div class="clearBoth"></div>
			</div>
		</div>
		
		<div id="dialog-error-alert" title="Error">
			<div class="sectionContainer">
				<p >Error! occured while performing Server Operation</p>
			</div>
			<div class="bottomButton">
				<a href="#" class="te-button buttonBlue floatleft closeAlert" >Ok</a>
				<div class="clearBoth"></div>
			</div>
		</div>
		
		<div id="dialog-validationError-alert" title="Error">
			<div class="sectionContainer">
				<p >Error! Some of the required field are not correctly entered. Close this message to view the exact nature of the error.</p>
			</div>
			<div class="bottomButton">
				<a href="#" class="te-button buttonBlue floatleft closeAlert" >Ok</a>
				<div class="clearBoth"></div>
			</div>
		</div-->
		<!--EO Popup Content Add Event-->
		<script type="application/javascript" src="/ce-static-testedge/common/jscripts/knockout.mapping-latest.js"></script>

		<!-- Start of Template Definitions -->
		<script type="text/html" id="holiday-template">
			<tr>
			<td><label class="floatleft datepickerLabel"><input type="text" data-bind="value: holiday.startDate, click: holidayStartDateHandler,attr: { name: 'sd_'+$index()},jqueryUIBindings: 'start'" class="datepicker_ayp_start" dateFormat: "dd/mm/yy" placeholder="Choose.."></label></td>
			<td><label class="floatleft datepickerLabel"><input type="text" data-bind="value: holiday.endDate,click: holidayEndDateHandler,attr: { name: 'ed_'+$index()}, jqueryUIBindings: 'end'" class="datepicker_ayp_end" dateFormat: "dd/mm/yy" placeholder="Choose.." ></label></td>
			<td><input type="text" data-bind="value: holiday.title" class="width320" placeholder="Type here.."></td>
			<td data-bind="text: holiday.noOfDays"></td>
			<td><a href="#" class="deleteIcon floatleft" title="Delete Holiday" data-bind="click: $root.removeHoliday, btnCustBinding: {},visible: editMode" style="display:block"></a></td>
			</tr>
		</script>

		<script type="text/html" id="section-template">

			<h3 class="floor">
			<span class="floatleft title" data-bind="text: section.sectionTitle"></span>
			<a href="#" class="deleteIcon floatright" title="Delete Section" data-bind="click: $parent.deleteSectionHandler,visible: editMode && !editEventHolidayOnly()"></a>
			<a href="#" class="editIcon floatright"  title="Edit Section" data-bind="click: editSectionHandler,visible: editMode && !editEventHolidayOnly()"></a>
			<div class="clearBoth"></div>
			</h3>

			<div class="floorSection">
			<div class="subTitle">
			<span class="titleA">Grade</span><span class="titleA">Division</span>
			<div class="clearBoth"></div>
			</div>
			<ul data-bind="foreach: { data: section.grades, as: 'grade'}">
			<li>
			<strong class="floatleft title" data-bind="text: grade.gradeTitle"></strong>
			<div class="roomBoxcontainer" data-bind="foreach:{data: grade.divisions, as: 'division'}">
			<!--span class="roomBoxPlygrp" data-bind="text: division.divisionTitle"></span-->
			<span class="roomBox" data-bind="text: division.divisionTitle"></span>
			</div>
			<a href="#" class="deleteIcon floatleft" title="Delete Grade" data-bind="click: $parent.deleteGradeHandler,visible: editMode && !editEventHolidayOnly()" style="display:block"></a>
			<div class="clearBoth"></div>
			</li>
			</ul>
			</div>
		</script>

		<script type="text/html" id="grade-template">
			<tr>
			<td><select class="select floatleft width123" data-bind="options: $parent.gradesList,  optionsText: 'gradeTitle', value: grade.selectedGrade, preSelect:{value:grade.selectedGrade().ceGradeId}"></select></td>
			<td><select class="select floatleft width44" data-bind="options: $parent.noOfDivisionsList, value: grade.noOfDivisions"></select></td>
			<td><select class="select floatleft width123" data-bind="options: $parent.namingConvList, value: grade.namingConvention"></select></td>
			<td>
			<!-- ko template: { name: selectTemplate, foreach: grade.divisions}-->
			<!-- /ko -->
			</td>
			<td><a href="#" class="deleteIcon floatleft" title="Delete Grade" data-bind="click: $parent.removeGrade, visible: editMode"></a></td>
			</tr>
		</script>
		<script type="text/html" id="custom-division-template">
			<input type="text" class="width80 inputCustome" data-bind="value: divisionCustTitle" placeholder="Type here.." />
		</script>
		<script type="text/html" id="alpha-division-template">
			<span class="roomBox" data-bind="text: divisionAlphaTitle"></span>
		</script>
		<script id="customMessageTemplate" type="text/html">
			<em class="customMessage" data-bind="validationMessage: field"></em>
		</script>
		<script type="text/html" id="event-template">
			<tr class="eventRow">
			<td  data-bind="text: dateDuration"></td>
			<td data-bind="text: noOfDays"></td>
			<td data-bind="text: eventName"></td>
			<td><div style="width:480px; word-wrap: break-word"><span class="fontBlod" data-bind="text: title"/><br><span data-bind="text: desc" /></div></td>
			<!--td><a href="#" hidden>View additional details</a></td-->
			<td><a href="#" class="editIcon floatright " title="Edit Event" data-bind="click: editEvent,visible: editMode" ></a></td>
			<td><a href="#" class="deleteIcon floatright" title="Delete Event" data-bind="click: deleteEvent,visible: editMode" ></a></td>
			<!--td><a href="#" class="editIcon floatright" style="display:block"></a></td-->
			</tr>
		</script>
		<script type="application/javascript" src="/ce-static-testedge/ayp/jscripts/ayp_createaypcontroller.js"></script>
		<script type="application/javascript" src="/ce-static-testedge/ayp/jscripts/ayp_sectionscontroller.js"></script>
		<script type="application/javascript" src="/ce-static-testedge/ayp/jscripts/ayp_fetchrecordscontroller.js"></script>
		<script type="application/javascript" src="/ce-static-testedge/ayp/jscripts/ayp_custombindingcontroller.js"></script>
		<script type="application/javascript" src="/ce-static-testedge/ayp/jscripts/ayp_deletecontroller.js"></script>
		<script type="application/javascript" src="/ce-static-testedge/common/jscripts/datecontroller.js"></script>
	</body>
</html>



